import React, { useEffect, useState } from 'react';
import { IRouteComponentProps } from 'umi'
import { observer } from 'mobx-react-lite'
import styles from './interviewRecord.less'
import { Button } from 'antd'
import useStore from '@/context/useStore';
import { getInterviewDetail } from '@/services'
import { IInterviewDetail } from '@/utils/interface.d'

const status = ['不确定', '通过', '未通过']
const InterviewRecord: React.FC<IRouteComponentProps> = ({ history, location }) => {
    // 从url参数中获取interviewId
    let interviewId = location.query.interviewId

    // 获取仓库的skill模块
    // let { interviewRecord } = useStore();

    const [interviewData, setInterviewData] = useState<IInterviewDetail>()
    
    const [status, setstatus] = useState(1)
    
    const changestatus = () => {
        if (status == 0) {
            setstatus(1)
            alert('屏蔽成功')
        } else {
            setstatus(0)
            alert('解除屏蔽成功')
        }
    }

    useEffect(() => {
        if (interviewId) {
            getInterviewDetail(interviewId as string).then(res => {
                setInterviewData(res.data)
                setstatus(res.data.status)
            })
        }
    }, [interviewId])

    return (
        <div className={styles.interviewRecord}>
            <section className={styles.sec}>面试 / 面试记录详情</section>

            <section className={styles.sec1}>
                <div className={styles.see}>
                    <h3><span>|</span> 查看面试记录</h3>
                </div>
                <div className={styles.buttons}>
                    <Button className={styles.ant_btn} onClick={() => { history.goBack() }}>返回</Button>
                    <Button type="primary" className={styles.ant_btn_primary} onClick={() => { changestatus() }}>{status==0?"屏蔽":"解除屏蔽"}</Button>
                </div>
            </section>

            <section className={styles.sec2} >
                <div className={`sec_status ${status == 1 ? "activb" : "activc"}`}>
                    <div className={styles.form}>
                        <div className={styles.row}>
                            <label>岗位名称</label>
                            <div>{interviewData && interviewData.stationName}</div>
                        </div>
                        <div className={styles.row}>
                            <label>公司名称</label>
                            <div>{interviewData && interviewData.companyName}</div>
                        </div>
                    </div>
                    <div className={styles.form}>
                        <div className={styles.row}>
                            <label>面试时间</label>
                            <div>{interviewData && interviewData.interviewTime}</div>
                        </div>
                        <div className={styles.row}>
                            <label>时长</label>
                            <div>{interviewData && interviewData.duration}</div>
                        </div>
                    </div>
                    <div className={styles.form}>
                        <div className={styles.row}>
                            <label>地点</label>
                            <div>{interviewData && interviewData.site}</div>
                        </div>
                        <div className={styles.row}>
                            <label>面试官</label>
                            <div>{interviewData && interviewData.intervierManagement}</div>
                        </div>
                    </div>
                    <div className={styles.form}>
                        <div className={styles.row}>
                            <label>专业</label>
                            <div>{interviewData && interviewData.majorName}</div>
                        </div>
                        <div className={styles.row}>
                            <label>提交人</label>
                            <div>{interviewData && interviewData.commitName}</div>
                        </div>
                    </div>
                    <div className={styles.form}>
                        <div className={styles.row}>
                            <label>记录-吐槽</label>
                            <div>{interviewData && interviewData.record}</div>
                        </div>
                    </div>
                    <div className={styles.form}>
                        <div className={styles.row}>
                            <label>面试结果</label>
                            <div>
                                {
                                    interviewData && interviewData.status == 0 ? '不确定' : interviewData && interviewData.status == 1 ? '通过' : '未通过'
                                }
                            </div>
                        </div>
                    </div>
                    <div className={styles.form_1}>
                        <div className={styles.row}>
                            <label>录音文件</label>
                            <div>
                                <p>{interviewData && interviewData.issoundrecord == 0 ? '无' : `有`}</p>
                                <p>
                                    {interviewData && interviewData.issoundrecord == 0 ? <img src='' /> : <img src="http://111.203.59.61:8060/static/img/audio.ad85b5e9.svg" alt="" />}
                                    {
                                        interviewData && interviewData.soundrecordList.map((item) => {
                                            return item.name
                                        })
                                    }
                                </p>
                            </div>
                        </div>
                    </div>
                    <div className={styles.form_2}>
                        <div className={styles.row}>
                            <label>面试问题</label>
                            <div className={styles.row_div}>
                                <p> 请如实填写面试问题和答案，面试中没有作答的题目可略过答案填写，直接输入问题即可。</p>
                                <div className={styles.row_divs}>
                                    {
                                        interviewData && interviewData.askAndanswerList.map((item, index) => {
                                            return <div key={index} className={styles.row_return}>
                                                <div>
                                                    <span className={styles.span1}>问</span>
                                                    <span>{item.question != '' ? item.question : '该问题没有作答/不知道答案'}</span>
                                                </div>
                                                <div>
                                                    <span className={styles.span2}>答</span>
                                                    <span>{item.answer ? item.answer : '该问题没有作答/不知道答案'}</span>
                                                </div>
                                            </div>
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div >
    );
}

export default observer(InterviewRecord)